<template>
	<div class="yh_content foSi14">
		<div class="yh_topsearch">
			<div class="yh_dis topsearch_item">
				<div class="search_left">会籍顾问</div>
				<div class="search_right yh_dis">
					<div v-for="(item, index) in search.membership" :key="index" class="sons"
						@click.stop="membershipClick(index)"
						:class="search.membership_index === index ? 'choiceme' : ''">
						{{ item.name }}({{ item.num }})
					</div>
				</div>
			</div>
			<div class="yh_xian" />
			<div class="yh_dis topsearch_item">
				<div class="search_left">渠道来源</div>
				<div class="search_right yh_dis">
					<div v-for="(item, index) in search.channelsource" :key="index" class="sons"
						@click.stop="channelsourceClick(index)"
						:class="search.channelsource_index === index ? 'choiceme' : ''">
						{{ item.name }}({{ item.num }})
					</div>
				</div>
			</div>
		</div>
		<div class="yh_topsearch yh_dis yh_disJub" style="border: none; padding: 0px; margin-top: 20px">
			<div>
				<div class="block yh_dis">
					<div>
						<div class="hei20 yh_qs yh_font13">入会时间</div>
						<el-date-picker v-model="search.join_time_start" style="width: 140px" size="small" type="date"
							placeholder="开始时间" />
						<el-date-picker v-model="search.join_time_end" style="width: 140px; margin-left: 5px"
							size="small" type="date" placeholder="截至日期" />
					</div>
					<div style="margin-left: 10px">
						<div class="hei20 yh_qs yh_font13">会员生日</div>
						<el-date-picker v-model="search.birthday_start" style="width: 140px" size="small" type="date"
							placeholder="开始时间" />
						<el-date-picker v-model="search.birthday_end" style="width: 140px; margin-left: 5px"
							size="small" type="date" placeholder="截至日期" />
					</div>
				</div>
				<div class="block yh_dis" style="margin-top: 10px">
					<div>
						<div class="hei20 yh_qs yh_font13">会员类型</div>
						<el-select v-model="search.member_type_id" style="width: 140px" size="small" placeholder="请选择">
							<el-option v-for="item in search.member_type" :key="item.value" :label="item.label"
								:value="item.value" />
						</el-select>
					</div>
					<div style="margin-left: 10px">
						<div class="hei20 yh_qs yh_font13">营销活动</div>
						<el-select v-model="search.activities_id" style="width: 140px" size="small" placeholder="请选择">
							<el-option v-for="item in search.activities" :key="item.value" :label="item.label"
								:value="item.value" />
						</el-select>
					</div>
					<div style="margin-left: 10px">
						<div class="hei20 yh_qs yh_font13">会员</div>
						<el-input v-model="search.name" size="small" placeholder="姓名/手机号" />
					</div>
					<div style="margin-left: 10px">
						<el-button type="primary" class="mar-top20 bac6b7" size="small"
							@click.stop="suosouClick">搜索</el-button>
					</div>
				</div>
				<!-- <div class="block">
          <span class="demonstration yh_qs yh_font13">会员生日</span><br>
          <el-date-picker v-model="search.birthday_start" style="width:140px" size="small" type="date" placeholder="开始时间">
          </el-date-picker>
          <el-date-picker v-model="search.birthday_end" size="small" type="date" placeholder="截至日期">
          </el-date-picker>
        </div> -->
			</div>
			<div>

				<router-link :to="'/member/editmember'" style="margin-right: 18px">
					<el-button type="primary" class="bac6b7" size="small">新增会员</el-button>
				</router-link>
				<el-popover popper-class="monitor-yt-popover" placement="bottom" width="104" trigger="click">
					<div class="wid100">
						<router-link :to="'/member/importMember'">
							<div class="que coFFF mar-bott5 cuPo" style="background: #6b7cdd;">批量导入</div>
						</router-link>
						<router-link :to="'/member/memberExport'">
							<div class="que coFFF mar-bott5 cuPo" style="background: #6b7cdd;">批量导出</div>
						</router-link>
						<router-link :to="'/member/exportVisitLogs?type=0'">
							<div class="que coFFF mar-bott5 cuPo" style="background: #6b7cdd;padding: 0 10px;">导出回访记录
							</div>
						</router-link>
						<router-link :to="'/member/batchMember'">
							<div class="que coFFF mar-bott5 cuPo" style="background: #6b7cdd;">批量编辑</div>
						</router-link>
					</div>
					<el-button slot="reference" type="primary" class="bac6b7" style="margin-top: 18px"
						size="small">批量操作</el-button>
				</el-popover>
			</div>
		</div>
		<div style="margin-top: 20px">
			<el-table :data="tableData" v-loading="listLoading" stripe style="width: 100%">
				<div slot="empty" class="m-empty-box">
					<div class="mar" style="width: 168px;height: 180px;">
						<img src="https://www.jianyigongxiang.com/public/membercard/empty.png" class="wh100">
					</div>
					<div class="title">暂无数据</div>
				</div>

				<el-table-column prop="id" label="会员id" />
				<el-table-column prop="nickname" label="昵称" />
				<el-table-column prop="realname" label="姓名" />
				<el-table-column prop="tel" label="联系方式" />
				<el-table-column prop="sex" label="性别">
					<template slot-scope="{row}">
						{{ row.sex === '1'?'男':'女' }}
					</template>
				</el-table-column>
				<el-table-column prop="score" label="当前积分" />
				<el-table-column prop="consultant" label="会籍顾问">
					<template slot-scope="{row}">
						{{row.consultant_name}}
					</template>
				</el-table-column>
				<el-table-column prop="channel" label="渠道来源">
					<template slot-scope="{row}">
						{{row.channel_name}}
					</template>
				</el-table-column>
				<el-table-column prop="join_time" label="入会时间" />
				<el-table-column prop="birthday" label="会员生日" />
				<el-table-column :label="$t('table.actions')" align="center" width="280"
					class-name="small-padding fixed-width">
					<template slot-scope="scope">
						<div class="yh_dis">
							<router-link :to="'/member/memberAddCard?type=0&item='+JSON.stringify(scope.row)">
								<div class="yh_dis cuPo" style="align-items: center; margin-right: 10px">
									<i class="el-icon-bank-card" style="color: #6b7cdd; font-size: 20px" />发卡
								</div>
							</router-link>
							<router-link :to="'/member/memberAddCard?type=1&item='+JSON.stringify(scope.row)">
								<div class="yh_dis cuPo" style="align-items: center; margin-right: 10px">
									<i class="el-icon-bank-card" style="color: #6b7cdd; font-size: 20px" />发体验卡
								</div>
							</router-link>
              <div class="yh_dis cuPo" @click.stop="details(scope.row.id)" style="align-items: center; margin-right: 10px">
                <i class="el-icon-document" style="color: #6b7cdd; font-size: 20px" />详情
              </div>
							<div v-if="juDgeTrue('memberlist_del')" class="yh_dis cuPo" style="align-items: center; margin-right: 10px" @click="getDel(scope.row.id)">
								<i class="el-icon-delete" style="color: #6b7cdd; font-size: 20px" />删除
							</div>
						</div>
					</template>
				</el-table-column>
			</el-table>
			<pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit"
				@pagination="getList" />
		</div>
	</div>
</template>

<script>
	import {
		getXuan,
		judgeButton
	} from '@/utils/limits.js'
	import {
		mapGetters
	} from 'vuex' // Secondary package based on el-pagination
	import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
	import {
		getList,
		getConsultant,
		getChannel,
    getDel
	} from '@/api/member'
	export default {
		name: 'ArticleList',
		components: {
			Pagination
		},
		filters: {
			statusFilter(status) {
				const statusMap = {
					published: 'success',
					draft: 'info',
					deleted: 'danger'
				}
				return statusMap[status]
			}
		},
		data() {
			return {
				list: null,
				total: 0,
				listLoading: false,
				search: {
					name: '',
					membership: [], // 会籍顾问
					membership_index: 0, // 选中了谁的index
					channelsource: [], // 渠道来源
					channelsource_index: 0,
					birthday_start: '', // 生日开始时间
					birthday_end: '', // 生日结束时间
					join_time_start: '', // 入会时间开始
					join_time_end: '', // 入会时间结束
					member_type: [{
							value: '0',
							label: '全部'
						},
						{
							value: '1',
							label: '独立'
						},
						{
							value: '2',
							label: '家庭组'
						}
					], // 会员类型
					member_type_id: '0',
					activities: [{
						value: '0',
						label: '不指定'
					}], // 营销活动
					activities_id: '0'
				},
				tableData: [],
				listQuery: {
					page: 1,
					limit: 10
				},
        pageNum: 1
			}
		},
		computed: {
			...mapGetters([
				'permission_routes',
				'roles'
			])
		},
    destroyed() {
      // 销毁组件
      sessionStorage.removeItem("memberlist");
    },
		created() {
      if (sessionStorage.getItem("memberlist")) {
        //搜索的数据
        let data = JSON.parse(sessionStorage.getItem("search"));
        this.search = data
        console.log("你走了吗",data);
      } else {
        //其他页面第一次进入列表页，清掉缓存里面的数据
        sessionStorage.removeItem("search");
      }
      var cg = localStorage.getItem('cg')
      this.cg = cg ? parseInt(cg) : 0

			var xuanList = []
      if(this.cg === 0){
        xuanList = [{
          name: '会员',
          url: '/member/memberlist',
          pd: true
        }, {
          name: '家庭成员',
          url: '/member/familys',
          pd: true
        }]
      }else{
        xuanList = [{
          name: '会员',
          url: '/member/memberlist',
          pd: true
        }]
      }
			var xuanList1 = getXuan(xuanList, this.roles)
			this.$store.dispatch('user/changeXuan', {
				key: 'xuanList',
				value: xuanList1
			})
			this.$store.dispatch('user/changeXuan', {
				key: 'xuan',
				value: 0
			})
			getConsultant().then(response => {
				const {
					data
				} = response
				var row = [{
					id: 0,
					name: '全部',
					num: data.length
				}]
				this.search.membership = row.concat(data)
			});
			getChannel().then(response => {
				const {
					data
				} = response
				var row = [{
					id: 0,
					name: '全部',
					num: data.length
				}]
				this.search.channelsource = row.concat(data)
				this.getList();
			});
		},
		methods: {
      details(id) {
        sessionStorage.setItem("search", JSON.stringify(this.search));
        this.$router.push("/member/memberDetail?id="+id);
      },
			juDgeTrue(name){
				return judgeButton(name,this.roles)
			},
			membershipClick(index) {
				if (index !== this.search.membership_index) {
					this.search.membership_index = index
					this.getList();
				}
			},
			channelsourceClick(index) {
				if (index !== this.search.channelsource_index) {
					this.search.channelsource_index = index
					this.getList();
				}
			},
			suosouClick() {
				this.listQuery = {
					page: 1,
					limit: 10
				}
				this.getList()
			},
			getList() {
				this.listLoading = true;
				var date = {
					'page': this.listQuery.page,
					'limit': this.listQuery.limit,
					'birthday_start': this.search.birthday_start,
					'birthday_end': this.search.birthday_end,
					'keyword': this.search.name,
					'family_id': this.search.member_type_id,
					'join_time_start': this.search.join_time_start,
					'join_time_end': this.search.join_time_end,
					'activity': this.search.activities_id,
					'membership': this.search.membership_index,
					'channel': this.search.channelsource_index
				}
				getList(date).then(response => {
					const {
						data
					} = response
					this.tableData = data.data
					this.total = data.total
					this.listLoading = false
				}).catch(error => {
					console.log(error)
					this.listLoading = false
				})
			},
      getDel(id){
		var that = this
        this.$confirm('删除会员操作不可恢复，且会同时删除该会员名下所有会员卡、余额、佣金以及营业统计数据!确定删除?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          var date = {
            'id': id
          }
          getDel(date).then(response => {
            const {
              date
            } = response
            that.getList()
          }).catch(error => {
            console.log(error)

            that.listLoading = false
          })
        })
      },
			handleSizeChange(val) {
				console.log(`每页 ${val} 条`)
			},
			handleCurrentChange(val) {
				console.log(`当前页: ${val}`)
			}
		}
	}
</script>
<style>
	.monitor-yt-popover {
		border: 2px solid #84878d;
		padding: 20px;
	}

	.monitor-yt-popover .popper__arrow::after {
		border-bottom-color: #84878d !important;
		border-top-color: #84878d !important;
	}

	.monitor-yt-popover[x-placement^=bottom] .popper__arrow::after {
		top: 0px !important;
	}

	.monitor-yt-popover[x-placement^=top] .popper__arrow::after {
		bottom: 0px !important;
	}
</style>
<style scoped>
	.yh_content {
		padding: 20px;
	}

	.yh_topsearch {
		border: 1px solid #ccc;
		padding: 20px 20px 0px 20px;
	}

	.yh_dis {
		display: flex;
	}

	.yh_disAlc {
		align-items: center;
	}

	.topsearch_item {
		/* padding: 20px; */
	}

	.search_left {
		width: 150px;
		font-size: 12px;
		color: #838383;
	}

	.search_right {
		flex-wrap: wrap;
	}

	.sons {
		margin-left: 20px;
		cursor: pointer;
		font-size: 12px;
		margin-bottom: 15px;
	}

	.choiceme {
		color: #6b7cdd;
		font-size: 12px;
	}

	.yh_xian {
		border-bottom: 1px solid #e7e7e7;
		/* width: 98%; */
		margin: 0px auto;
		margin-bottom: 20px;
	}

	.yh_qs {
		color: #838383;
	}

	.yh_disJub {
		justify-content: space-between;
	}

	.yh_disJuc {
		justify-content: center;
	}

	.yh_font12 {
		font-size: 12px;
	}

	.yh_font13 {
		font-size: 13px;
	}
</style>
